<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<!-- <el-button type="primary" @click="sreach">查询供应商</el-button> -->
				<el-button type="primary" @click="addDeptPartment">新增销售员</el-button>
			</el-form-item>
		</el-form>
		
		<el-table :data="pageInfo.list" style="100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="销售员id" prop="id" width="80" ></el-table-column>
			<el-table-column label="销售员中文姓名" prop="chinesename" width="120" ></el-table-column>
			<el-table-column label="销售员英文姓名" prop="englishname" width="120" ></el-table-column>
			<el-table-column label="销售员年龄" prop="salesmanage" width="100" ></el-table-column>
			<el-table-column label="负责的客户" prop="customer.longname" width="100" ></el-table-column>
			<el-table-column label="电话" prop="phone" width="80" ></el-table-column>
			<el-table-column label="移动电话" prop="mobilephone" width="100" ></el-table-column>
			<el-table-column label="电子邮件" prop="email" width="150" ></el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template>
						<el-button @click="handleTypeEdit(scope)" size="mini">编辑</el-button>
						<el-button size="mini" @click="handleTypeDel(scope)">删除</el-button>
					</template>					
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next,total,jumper"			
			:total="pageInfo.total"
			:page-size="pageInfo.pageSize"
			:page-count="pageInfo.navigatePages"
			:current-page="pageInfo.pageNum"
			background
			@current-change="handleCurrentChange"
		></el-pagination>
		
		<el-dialog :visible.sync="addSalesman" title="新增销售员" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="销售员中文姓名:">
					<el-input v-model="addList.chinesename" placeholder="销售员中文姓名" ></el-input>
				</el-form-item>
				<el-form-item label="销售员英文姓名:">
					<el-input v-model="addList.englishname" placeholder="销售员英文姓名" ></el-input>
				</el-form-item>
				<el-form-item label="销售员年龄:">
					<el-input v-model="addList.salesmanage" placeholder="销售员年龄" ></el-input>
				</el-form-item>
				<el-form-item label="负责的客户:">
					<el-select placeholder="所属分类" v-model="addList.customer.id">
						<el-option
							v-for="list in customerList"
							:key="list.id"
							:label="list.longname"
							:value="list.id"
						>
							
						</el-option>
						<el-option
							label="不负责"
							value=""
						>
							
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话:">
					<el-input v-model="addList.phone" placeholder="电话" ></el-input>
				</el-form-item>
				<el-form-item label="移动电话:">
					<el-input v-model="addList.mobilephone" placeholder="移动电话" ></el-input>
				</el-form-item>
				<el-form-item label="电子邮件:">
					<el-input v-model="addList.email" placeholder="电子邮件" ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="mini" @click="add()">保存</el-button>
					<el-button size="mini" @click="quxiao2()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog :visible.sync="updatetype" title="编辑销售员" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="销售员id:">
					<el-input v-model="type.id" placeholder="销售员id" ></el-input>
				</el-form-item>
				<el-form-item label="销售员中文姓名:">
					<el-input v-model="type.chinesename" placeholder="销售员中文姓名" ></el-input>
				</el-form-item>
				<el-form-item label="销售员英文姓名:">
					<el-input v-model="type.englishname" placeholder="销售员英文姓名" ></el-input>
				</el-form-item>
				<el-form-item label="销售员年龄:">
					<el-input v-model="type.salesmanage" placeholder="销售员年龄" ></el-input>
				</el-form-item>
				<el-form-item label="负责的客户:" >
					<el-select placeholder="所属分类" v-model="type.customer.id">
						<el-option
							v-for="list in customerList"
							:key="list.id"
							:label="list.longname"
							:value="list.id"
						>
							
						</el-option>
						<el-option
							label="不负责"
							value=""
						>
							
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="电话:">
					<el-input v-model="type.phone" placeholder="电话" ></el-input>
				</el-form-item>
				<el-form-item label="移动电话:">
					<el-input v-model="type.mobilephone" placeholder="移动电话" ></el-input>
				</el-form-item>
				<el-form-item label="电子邮件:">
					<el-input v-model="type.email" placeholder="电子邮件" ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="handleTypeSave()" size="mini">保存</el-button>
					<el-button size="mini" @click="quxiao()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageInfo:{
					pageNum:1,
					pageSize:3,
				},
				keyword:'',
				type:{
					customer:{}
				},
				type2:{
					customer:{}
				},
				addList:{
					customer:{}
				},
				updatetype:false,
				addSalesman:false,
				customerList:[]
			}
		},
		created() {
			this.getPaged(this.pageInfo.pageNum,this.pageInfo.pageSize,this.keyword);
		},
		methods:{
			getPaged(pageNum,pageSize,keyword){
				
				let url = "salesman/getPaged";
				
				axios.post(url,`pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`).then(resp=>{
					this.pageInfo = resp.data.data;
					// console.log(this.pageInfo);
				})
			},
			handleCurrentChange(pageNum){
				this.getPaged(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleTypeEdit(scope){
				this.updatetype = true;
				
				this.type2 = scope.row;
				if(this.type2.customer==null){
					this.type2.customer = {}
				}
				this.type = {...scope.row};
				if(this.type.customer==null){
					this.type.customer = {}
				}
				
				let url = "salesman/getAllCustomer"
				axios.post(url).then(resp=>{
					this.customerList = resp.data.data;
					// console.log(this.customerList);
				})
			},
			handleTypeSave(){
				let url = "salesman/update";
				
				// if(this.type.customer.id == -1){
				// 	this.type.customer.id = "";
				// }
				
				axios.post(url,this.type).then(resp=>{
					this.updatetype = false;
					// this.type2.id = this.type.id;
					// this.type2.chinesename = this.type.chinesename;
					// this.type2.englishname = this.type.englishname;
					// this.type2.salesmanage = this.type.salesmanage;
					// this.type2.customer.longname = this.type.customer.longname;
					// this.type2.phone = this.type.phone;
					// this.type2.mobilephone = this.type.mobilephone;
					// this.type2.email = this.type.email;
					this.getPaged(this.pageInfo.pageNum,this.pageInfo.pageSize,this.keyword);
				});
			},
			quxiao(){
				this.updatetype = false;
			},
			addDeptPartment(){
				this.addSalesman = true;
			},
			quxiao2(){
				this.addSalesman = false;
			},
			add(){
				let url = "salesman/insert";
				axios.post(url,this.addList).then(resp=>{
					if(resp.data.data == 1){
						this.addSalesman = false;
						this.getPaged(this.pageInfo.pageNum,this.pageInfo.pageSize,this.keyword);
					}
				});
			},
			handleTypeDel(scope){
				if(scope.row.customer == null){
					let url = "salesman/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.getPaged(1,this.pageInfo.pageSize,this.keyword);
						}
					});
				}else{
					this.$alert("请先处理该销售员负责的客户");
				}

			}
		}
	}
</script>

<style>
</style>
